<template>
    <view class="wrap">
        <view class="wrap_content">
            <view class="suc">
                <view class="time">{{$u.timeFormat(Date.now(), 'mm月dd日 hh:MM')}} | {{fontNum}} 字</view>
                <view class="showSuc" @click="successMd" :style="'display:' + display">
                    完成
                </view>
            </view>
            <view class="title">
                <input type="text" placeholder="标题" v-model="MdTitle" style="font-weight: bold; font-size: 45rpx;" />
            </view>
            <view class="content">
                <textarea v-model="MdContent" border="none" maxlength="-1" auto-height style="width: 100%;"
                    :adjust-position="false" confirm-type="done" @input="getFontNum"
                    :show-confirm-bar="false"></textarea>
            </view>
        </view>
        <!-- <button type="primary" class="publish_btn" :disabled="disabled">添加</button> -->
    </view>
</template>

<script>
    import * as cloudApi from '@/utils/cloudApi.js'
    export default {
        data() {
            return {
                fontNum: 0,
                disabled: true,
                MdContent: '',
                MdTitle: '',
                token: null,
                display: 'none',
                id: ''
            }
        },
        computed: {

        },
        watch: {
            //无内容时按钮置灰
            MdTitle(value) {
                value ? (this.display = '') : (this.display = 'none');
            },
            MdContent(value) {
                value ? (this.display = '') : (this.display = 'none');
            },
        },
        onLoad(opt) {
            console.log(opt.id);

            if (opt.id) {
                // 根据id获取备忘录信息
                this.id = opt.id
                cloudApi.call({
                    name: 'memorandum',
                    data: {
                        api: 'MdById',
                        action: 'get',
                        _id: opt.id
                    },
                    success: res => {
                        console.log(res.result.data[0]);
                        this.MdContent = res.result.data[0].content
                        this.MdTitle = res.result.data[0].title
                    }
                })
            }
            this.token = uni.getStorageSync("token") || getApp().globalData.token
        },
        methods: {
            successMd() {
                if (this.id) { // 更新 修改
                    this.updateMd()
                } else { // 添加
                    this.addMd()
                }
            },
            addMd() {
                cloudApi.call({
                    name: "memorandum",
                    data: {
                        api: 'addMdApid',
                        content: this.MdContent,
                        title: this.MdTitle,
                        token: this.token
                    },
                    success: (res) => {
                        console.log(res);
                        uni.navigateBack({
                            delta: 1,
                            success: () => {
                                this.$showToast('添加成功', 'none')
                                uni.$emit('getMd')
                            }
                        })
                    }
                })
            },
            updateMd() {
                cloudApi.call({
                    name: "memorandum",
                    data: {
                        api: 'updateMdApid',
                        content: this.MdContent,
                        title: this.MdTitle,
                        _id: this.id
                    },
                    success: (res) => {
                        console.log(res);
                        uni.navigateBack({
                            delta: 1,
                            success: () => {
                                this.$showToast('更新成功', 'none')
                                uni.$emit('getMd')
                            }
                        })
                    },
                    fail() {
                        this.$showToast('更新失败', 'none')
                    }
                })
            },
            getFontNum(e) {
                console.log(e);
                this.fontNum = e.detail.value.length
            }
        }
    }
</script>

<style lang="scss">
    .wrap {
        padding: 40rpx;

        .wrap_content {
            .suc {
                display: flex;
                justify-content: space-between;
                font-size: 26rpx;
                margin-bottom: 20rpx;

                .time {
                    color: #ccc;
                }

                .showSuc {
                    padding: 0 20rpx;
                    font-weight: bold;
                }
            }

            .title {
                margin: 40rpx 0;
                margin-bottom: 30rpx;
            }

            .content {
                width: 100%;
                margin-bottom: 20rpx;
            }
        }

        .publish_btn {
            width: 200rpx;
            height: 90rpx;
            color: #ffffff;
            border-radius: 20rpx;
            text-align: center;
        }
    }
</style>
